<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
h1 {
	/*
	 absolute
		Generates an absolutely positioned element, 
		positioned relative to the first parent element that has a position other than static. 
		The element's position is specified with the "left", "top", "right", and "bottom" properties
	 relative
		Generates a relatively positioned element, 
		positioned relative to its normal position, 
		so "left:20" adds 20 pixels to the element's LEFT position
	*/
	position: relative;
	left: 0px;
	top: 0px;
	
	/*
	 The z-index property specifies the stack order of an element.
	 An element with greater stack order is always in front of an element with a lower stack order.
	*/
	z-index: 1;
}

img {
	position: absolute;
	left: 30px;
	top: 0px;
	
	/* Firefox uses the property opacity:x for transparency, while IE uses filter:alpha(opacity=x).	*/
	filter: alpha(opacity : 70);
	opacity: 0.7;
	z-index: 2;
}

p {
	position: relative;
	left: 80px;
	top: 0px;
	z-index: 3;
}
</style>
</head>
<body>
	<h1>This is a heading</h1>
	<img src="../../images/w3css.gif" width="100" height="140"
	 onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
	 onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=70"
	/>
	<p>Because the image has a z-index of -1, it will be placed behind
		the text.</p>
</body>
</html>